<template>
  <a-modal
    :visible="visible"
    title="导师信息"
    okText='保存'
    :width="1100"
    @cancel="() => { $emit('close') }"
    :confirmLoading="confirmLoading"
    @ok="handleSave"
    class="teacherList"
  >
    <a-row type="flex" justify="start">
      <a-col :span="6">
        <a-select style="width:200px"
              :notFoundContent="deds.fetching ? undefined : null"
              allowClear placeholder="可输入导师编号或姓名搜索"
              v-model="selectedIndex"
              :filterOption="filterOption"
              @change="selectChange"
              showSearch>
          <a-spin v-if="deds.fetching" slot="notFoundContent" size="small"/>
          <a-select-option v-for="(i,index) in deds.optionTeacherList" :key="i.id" :value="index">{{ i.gh }}-{{ i.xm }}</a-select-option>
        </a-select>
      </a-col>
      <a-col :span="6">
        <div>
          <a-button @click="add" type="primary">查询</a-button>
        </div>
      </a-col>
    </a-row>
    
    
    <br />
    <a-checkbox-group v-if="serchList.length == 0"  v-model="teacherCheckedList" :options="teacherOptions" autoFocus @change="onChange" />
    <a-checkbox-group v-else v-model="teacherCheckedList" :options="serchList" autoFocus @change="serchChange" />
    <!-- <a-table
      :columns="columns"
      :dataSource="tearcherList"
      size="middle"
      :pagination="false"
      :scroll="{ y: 240 }"
    >
      <template slot="operation" slot-scope="text, record, index">
        <a-popconfirm title="是否要删除此行？" @confirm="remove(index)">
          <a>删除</a>
        </a-popconfirm>
      </template>
    </a-table> -->
  </a-modal>
</template>

<script>
import { debounce } from 'utils/common'

export default {
  props: ['visible', 'researchInfo'],
  data () {
    return {
      optionTeacherList: [],
      tearcherList: [],
      serchList: [],
      selectedIndex: undefined,
      teacherOptions:[],
      teacherCheckedList:[],
      deds : {
        fetching: false,
        optionTeacherList: []
      },
      // columns: [
      //   {
      //     title: '导师编号',
      //     width: 100,
      //     dataIndex: 'dsbh'
      //   },
      //   {
      //     title: '导师姓名',
      //     width: 350,
      //     dataIndex: 'dsmc'
      //   },
      //   {
      //     title: '导师类别',
      //     width: 100,
      //     dataIndex: 'dslbmc'
      //   },
      //   {
      //     title: '操作',
      //     width: 100,
      //     scopedSlots: { customRender: 'operation' }
      //   }
      // ],
      confirmLoading: false
    }
  },
  watch: {
    visible (val) {
      if (val && this.researchInfo.id) {
        this.selectedIndex = undefined
        this.$api.teacher.teacherListByDwh({dwh: this.researchInfo.ssyxm, zsnd: this.researchInfo.zsxn, zycc: this.researchInfo.xwccm, yjfxId: this.researchInfo.id}).then(res => {
          this.deds.optionTeacherList = res.data
          this.teacherOptions = res.data.map(item=>({label:`${item['gh']}-${item['xm']}`,value:item['gh']}));
          console.info((this.teacherOptions))
        })
        this.$api.teacher.teacherListByResearch({yjfxId: this.researchInfo.id, zsnd: this.researchInfo.zsxn}).then(res => {
          this.tearcherList = res.data
          this.teacherCheckedList = res.data.map(item=>item['dsbh']);
          console.info(this.teacherCheckedList)
        })
        // this.$api.teacher.teacherListByDwh({dwh: val.ssyxm}).then(res => {
        //   this.optionTeacherList = res.data
        // })
      }
    }
  },
  methods: {
    selectChange(e){
      if(e == undefined){
        this.add()
      }
      
    },
    onChange(e){
      console.info(e)
    },
    serchChange(e){
      console.info(e)
    },
    remove (index) {
      this.tearcherList.splice(index, 1)
    },
    add () {
      console.log(this.selectedIndex)
      console.log(this.deds.optionTeacherList[this.selectedIndex])
      if(this.selectedIndex != undefined){
        console.log(1111)
        let arr = []
        arr.push(this.deds.optionTeacherList[this.selectedIndex])
        this.serchList = arr.map(item=>({label:`${item['gh']}-${item['xm']}`,value:item['gh']}));
      }else{
        this.serchList = []
      }
      
      // let index = this.tearcherList.findIndex( t => {
      //   return t.dsbh == this.deds.optionTeacherList[this.selectedIndex].gh
      // })
      // if (index === -1) {
      //   this.tearcherList.push({
      //     dsbh: this.deds.optionTeacherList[this.selectedIndex].gh,
      //     dsmc: this.deds.optionTeacherList[this.selectedIndex].xm,
      //     dslbmc: this.deds.optionTeacherList[this.selectedIndex].dslbmc
      //   })
      // }
    },
    filterOption (value, op) {
      return op.componentOptions.children[0].text.indexOf(value) !== -1
    },
    handleSave () {
      console.info(this.teacherCheckedList)
      // if (!this.teacherCheckedList.length) {
      //   return this.$message.warning('请选择导师')
      // }
      this.confirmLoading = true
      let params = {
        yjfxId: this.researchInfo.id,
        zsnd: this.researchInfo.zsxn,
        dsbh: this.teacherCheckedList.toString()
      }
      this.$api.teacher.modifyDsYjfxByYjfx(params).then(() => {
        this.$message.success('修改成功')
        this.$emit('close')
        this.$emit('refresh')
      }).finally(() => {
        this.confirmLoading = false
      })
    }
  }
}
</script>

<style>
  .teacherList .ant-checkbox-group label{
    padding: 5px;
    width:180px
  }
</style>
